<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出框例子</title>
    <style>
        .popup{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 10px;
        }
        .popup .close{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(128,128,128,0.3);
        }
        .popup .content{
/*            max-width: 1050px;*/
            position: relative;
            z-index: 1;
/*            border-radius: 20px;*/
            overflow: hidden;
            /*width: 200px;*/
            background-color: #ffffff;
        }
        .contentDetail{
            border: #ffffff 1px solid;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<button id="btn" value="点我！！！！！">点我！！！！！！</button>
<div id="popup" class="popup">
    <div id="close" class="close"></div>
    <div id="content" class="content">

    </div>
</div>

<script type="text/javascript">
    window.onload = function () {
        document.querySelector("#popup").style.display='none';
        document.querySelector("#btn").onclick = function (event) {
            event = window.event || event;
            document.querySelector("#popup").style.display = 'flex';
        }
        document.querySelector("#close").onclick = function () {
            document.querySelector("#popup").style.display='none';
        }
        let width = '100px';
        let height = '200px';
        let template = `
            <div id="contentDetail" class="contentDetail" style="width: ${width};height:${height}">
                前端，好玩吗？
            </div>
        `;
        document.querySelector("#content").innerHTML = template;

    }
</script>
</body>
</html>